<template>
    <div class="login-cointer1">
        <el-image
            style="width: 100%; height: 100%"
            src="https://cfhy.oss-cn-beijing.aliyuncs.com/jpc/ui/loginFirst.jpg"
            fit="cover"
        ></el-image>

        <section class="login-item">
            <el-image
                style="width: 100%; height: 100%"
                src="https://cfhy.oss-cn-beijing.aliyuncs.com/jpc/ui/loginFirstItem.jpg"
                fit="cover"
            ></el-image>
        </section>
        <section class="title">
            welcome！
            <section style="font-size: 40px">成丰货运智能管理系统</section>
            <section style="font-size: 21px; line-height: 145px; display: flex">
        <span
            style="
            display: block;
            margin-top: -2px;
            margin-right: 15px;
            margin-left: 60px;
          "
        >———</span
        >
                让过磅成为一种简单的方式
            </section>
        </section>
        <section class="login">
            <section class="login-logo">
                <el-image
                    style="width: 100%; height: 100%"
                    src="/static/img/logo.png"
                    fit="cover"
                ></el-image>
            </section>
            <section class="item" style="color: #1890ff; font-size: 23px">
                企业认证
                <section
                    style="height: 2.5px; width: 50px; background-color: #1890ff   ; margin-top: 9px;
    margin-bottom:3px;"
                ></section>
                <section style="font-size: 16px; color: #999999; line-height: 30px">
                    欢迎使用系统，请进行企业认证！
                </section>
                <section >
                    <div style="position: relative;">
                        <el-input :disabled="flag" v-model="phone" placeholder="请输入手机号"
                                  :rules=" [ {validator:checkPhoneNumber, trigger:'blur'}]"
                                  style="margin-bottom:5%;margin-top:10%">
                        </el-input>
                        <img src="~@/assets/img/shoujiha.png" style="    width: 17px;
                                    position: absolute;
                                    height: 21px;
                                    top: 52%;
                                    left: 10px;"/>

                    </div>

                     <div style="position: relative;">
                         <el-input :disabled="flag" v-model="captcha" placeholder="请输入验证码">

                         </el-input>
                         <img src="~@/assets/img/tupianyanzheng.png" style="width: 17px;
                           position: absolute;
                           height: 21px;
                           top: 34.4%;
                           left: 10px;"/>
                         <el-button @click="send" class="but2" :disabled="!show">
                             获取验证码
                             <span v-show="!show" class="count">({{ count }}s)</span>
                         </el-button>

                     </div>

                </section>
                <section :disabled="flag" @click="check" style="
                  height: 50px;
                  width: 100%;
                  background-color: #1890ff;
                  margin-top: 10%;
                  text-align: center;
                  line-height:50px
                  font-size:18px;
                  cursor:pointer;
                  box-shadow: 0px 0px 8px 0px rgba(51, 51, 51, 0.1);
                  border-radius: 6px;
                  color: #FFFFFF;
                ">
                    验证
                </section>
                <section class="flag1" style="position: absolute;bottom: -120px;text-align: center;right: 29%;line-height: 40px;
font-size: 16px;
                color: #999999;">
                                    <span style="padding-right: 56px;">帮助</span>
                                    <span style="padding-right: 56px;">隐私</span>
                                    <span>条款</span>
                                    <section>
                                        copyright©成丰货运
                                    </section>
                                </section>
            </section>
        </section>


        <el-dialog
            title="选择企业"
            :visible.sync="innerVisible"
            class="addForm-wrapper"
            label-width="93px"
            append-to-body>
            <el-form>
                <el-form-item>
                    <el-select clearable v-model="tenantId" placeholder="请选择企业">
                        <el-option
                            v-for="item in tenantList"
                            :key="item.id"
                            :label="item.fullName"
                            :value="item.id">
                        </el-option>
                    </el-select>
                </el-form-item>

            </el-form>

            <span slot="footer" class="dialog-footer">
        <el-button size="small" type="primary" @click="doSubmit()" v-noMoreClick
        >确定</el-button
        >
        <el-button size="small" @click="close()">取消</el-button>
      </span>
        </el-dialog>
       <el-dialog
              :close-on-click-modal="false"
              :visible.sync="limitedVisible"

              class="limit-wrapper"
              label-width="93px"
              append-to-body>
              <div style="width: 473px;height: 190px;">
                  <div style="width: 134px;font-size: 22px;color: #e8423f;margin: 0 auto; margin-top: 12px;">
                      <img src="~@/assets/img/ku.png" style="width: 28px;height: 28px;">
                      访问受限
                  </div>
                  <div style="font-size: 16px;line-height: 50px;margin-top: 20px;text-align: center;color: #666666;">
                      理由：该设备或者网络环境不允许访问平台。
                  </div>
                  <div style="font-size: 16px;margin-top: 0px; text-align: center;color: #666666;">

                     如有需要，可以联系客服人员。客服电话：400-888-888
                  </div>

              </div>



          </el-dialog>
    </div>
</template>

<script>
    import $ from 'jquery'
    import {certification, enterpriseCheckPhone, sendSpecialCaptcha} from "@/api/sys/login.js";
    import {setLocalStorage,getLocalStorage} from "@/utils/localstore.js"

    const TIME_COUNT = 60; //更改倒计时时间
    export default {
        data() {
            return {
                url: "",
                show: true, // 初始启用按钮
                count: '', // 初始化次数
                flag: false,
                innerVisible: false,
                phone: '',
                limitedVisible:false,
                captcha: '',
                tenantId: '',
                tenantList: [],
                rules: {
                    username: [
                        {required: true, message: "帐号不能为空", trigger: "blur"},
                    ],
                    password: [
                        {required: true, message: "密码不能为空", trigger: "blur"},
                    ],
                    captcha: [
                        {required: true, message: "验证码不能为空", trigger: "blur"},
                    ],
                },
            };
        },
        created() {
        },

        methods: {

            // 向localStorage存入标识
            doSubmit() {
                if (this.tenantId) {
                    for (let i = 0; i < this.tenantList.length; i++) {
                        const tenantListElement = this.tenantList[i];
                        if (tenantListElement.id === this.tenantId) {
                            // setLocalStorage('name', 'hello, world');
                            // var localKey = getLocalStorage('name');
                          if (tenantListElement.state === 3) {
                            this.$Msg.warning({
                              title: '服务已到期',
                              content: "服务已到期，请联系您的客服人员！",
                              autoClose: false
                            });
                          }
                          if (tenantListElement.state === 2) {
                            setLocalStorage('tenantCode', tenantListElement.codes+"-sys");
                            setLocalStorage('isAdminUser', tenantListElement.isAdminUser)
                            setLocalStorage('fullName', tenantListElement.fullName)
                            console.log(getLocalStorage('fullName'))
                            this.$router.push({path: '/login3'})
                          }
                        }
                    }
                } else {
                    this.$notify.error({
                        title: '错误',
                        message: '请选择单条业务数据'
                    })
                }
            },
            close() {
                this.innerVisible = false
            },
            send() {
                console.log(this.count)
                if (this.phone) {
                    let that = this
                    if (this.phone && (!(/^[1][34578]\d{9}$/).test(this.phone) || !(/^[1-9]\d*$/).test(this.phone) || this.phone.length !== 11)) {
                        this.$Msg.error({
                            title: '企业认证失败',
                            content: "理由：手机号码不符合规范",
                            autoClose: true
                        })
                    } else {
                        sendSpecialCaptcha({"phone": this.phone}).then((res) => {
                            if (!this.timer) {
                                this.count = TIME_COUNT;
                                this.show = false;
                                this.timer = setInterval(() => {
                                    if (this.count > 0 && this.count <= TIME_COUNT) {
                                        this.count--;
                                    } else {
                                        this.show = true;
                                        clearInterval(this.timer); // 清除定时器
                                        this.timer = null;
                                    }
                                }, 1000)
                            }
                            if (res.data.code === '200') {
                                that.$Msg.success({
                                    title: '成功',
                                    content: res.data.message,
                                    autoClose: false
                                });
                            }
                        });
                    }
                } else {
                    this.$Msg.error({
                        title: '企业认证失败',
                        content: "理由：手机号不能为空",
                        autoClose: true
                    })
                }

            },

            check() {
                if (this.phone !== '' && this.captcha !== '') {
                    if (this.phone && (!(/^[1][34578]\d{9}$/).test(this.phone) || !(/^[1-9]\d*$/).test(this.phone) || this.phone.length !== 11)) {
                        this.$Msg.error({
                            title: '企业认证失败',
                            content: "理由：手机号码不符合规范",
                            autoClose: true
                        })
                    } else {
                        enterpriseCheckPhone({phone: this.phone, captcha: this.captcha}).then((res) => {
                            console.log(res);
                            if (res.data.code === 'A002') {
                              if (res.data.result.tenantList[0].state === 3) {
                                this.$Msg.warning({
                                  title: '服务已到期',
                                  content: "服务已到期，请联系您的客服人员！",
                                  autoClose: false
                                });
                              }
                              if (res.data.result.tenantList[0].state === 2) {
                                setLocalStorage('tenantCode', res.data.result.tenantCode+"-sys")
                                setLocalStorage('isAdminUser', res.data.result.tenantList[0].isAdminUser)
                                setLocalStorage('fullName', res.data.result.tenantList[0].fullName)
                                this.$router.push({path:'/login3'})
                              }

                            } else if (res.data.code === 'A001') {
                                if (res.data.result) {
                                    this.innerVisible = true;
                                    this.tenantList = res.data.result;
                                    console.log(this.tenantList)
                                } else {
                                    this.$Msg.warning({
                                        title: '企业认证失败',
                                        content: "未找到对应的企业，请检查管理员手机号是否正确",
                                        autoClose: false
                                    });
                                }
                            } else if (res.data.code === '500') {
                                this.$Msg.warning({
                                    title: '企业认证失败',
                                    content: res.data.message,
                                    autoClose: false
                                });
                            }
                        });
                    }
                } else {
                    this.$Msg.error({
                        title: '企业认证失败',
                        content: "理由：手机号或验证码不能为空",
                        autoClose: true
                    })
                }

            },

            setLocalStorage(key, value, expired) {
                var data = {value: value, expirse: new Date(expired).getTime()};
                localStorage.setItem(key, JSON.stringify(data));
            },
            getTime() {
                this.time = this.moment(new Date()).format("YYYY-MM-DD HH:mm:ss");
            },
            // 获取验证码
            getCaptcha() {
                this.captchaPath = this.$http.BASE_URL + `/captcha.jpg`;
            },
            // 校验手机号
            checkPhoneNumber(rule, value, callback) {
                if (value && (!(/^[1][34578]\d{9}$/).test(value) || !(/^[1-9]\d*$/).test(value) || value.length !== 11)) {
                    callback(new Error('手机号码不符合规范'))
                } else {
                    callback()
                }
            }
        },
        mounted() {
            //localStorage.getItem('tenantCode')
            this.$nextTick(()=>{

              // this.$message({
              //           message: getLocalStorage('tenantCode'),
              //           type: 'success'
              //         });
              certification({"tenantCode":getLocalStorage('tenantCode') }).then((res) => {
                // this.$message({
                //       message: res.data.code,
                //       type: 'success'
                //     });

                  if (res.data.code === 'E0001') { // 访问受限
                      this.flag = true
                      // this.$Msg.warning({
                      //     title: '访问受限',
                      //     content: "需要管理员认证",
                      //     autoClose: false
                      // })
                      this.limitedVisible=true;//访问受限
                  } else if (res.data.code === 'A0002') {
                      this.$router.push({path:'/login3'})
                      this.$Msg.confirm({
                      	title:'您确定要重新认证吗？',
                      	content:"须注销当前企业信息后，才可以切换到其他企业。</br>注销后再次登录本企业时需要管理员重新认证",
                      	confirmTxt:"是的",
                      	cancelTxt:"再想想",
                      	dialogWidth:"460px",
                      	confirmCall:()=>{
                      	  localStorage.removeItem('tenantCode');
                      		// console.log(localStorage.removeItem('tenantCode'))
                      		this.$router.push({
                      		  path: '/login2'
                      		})
                      	},
                      	cancelCall:()=>{
                      		console.log("取消回调")
                      	}
                      })

                  } else if (res.data.code=='A0001'){
                    localStorage.removeItem('isAdminUser')
                    localStorage.removeItem('fullName')

                  }
              });

            })

        }
    };
</script>

<style lang="scss" scoped>
    body{
        max-width: 1920px !important;
    }
    .limit-wrapper ::v-deep .el-dialog .el-dialog__header{
        display: none;
    }
   .limit-wrapper ::v-deep  .el-dialog__body {
        padding: 50px 30px 0 !important;
        padding-bottom: 0 !important;
    }
    ::v-deep .el-form {
        .el-input__inner {

            padding-left: 10px;
            width: 320px;
        }

    }

    ::v-deep .el-button {
        color: #999999;
        height: 60px;
    }

    .but2 {
        position: absolute;
        top: 0px;
        right: -1px;
    }


.flag1{
    display: block;
}
    @media (max-width:1462px){
        .flag1{
            display: none;
        }
        }


    .login-cointer1 {
        overflow-y: hidden !important;
        width: 100vw;
        height: 100vh;
        position: relative;

        .title {
            font-size: 119px;
            width: 400px;
            color: #ffffff;
            position: absolute;
            top: 33.7%;
            left: 10.2%;
        }

        .login {
            width: 34.16%;
            height: 72.7%;
            background: #ffffff;
            position: absolute;
            top: 10.52%;
            right: 16%;
            min-width: 420px;
            min-height: 580px;

            .login-logo {
                width: 45.53%;
                margin: 12.72% auto;
                margin-bottom: 9%;
            }

            .item {
                position: absolute;
                width: 68.69%;
                left: 16%;
            }
        }

        .login-item {
            width: 34.16%;
            height: 72.7%;
            position: absolute;
            min-width: 420px;
            min-height: 580px;
            top: 10.52%;
            left: 16%;
        }
    }
    ::v-deep .el-button:focus, .el-button:hover {
    color: #1890FF !important;
    border-color: #badeff !important;
    background-color: #e8f4ff !important;
}

    ::v-deep .el-input__inner {
        height: 60px !important;
        padding-left: 46px;
        border: 1px solid #DCDFE6 !important;

        font-size: 16px;
    }
</style>
